.md-center{
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}



.margin (@label, @size: 1, @key:1) when (@size =< 30) {
  .m-@{key} {
    margin: @size !important;
  }

  .m-t-@{key} {
    margin-top: @size !important;
  }

  .m-b-@{key} {
    margin-bottom: @size !important;
  }

  .m-l-@{key} {
    margin-left: @size !important;
  }

  .m-r-@{key} {
    margin-right: @size !important;
  }

  .margin(@label - 5; @size + 5; @key + 5);
}

.margin(25, 0px, 0);

/*
 * Generate Padding Class
 * padding, padding-top, padding-bottom, padding-left, padding-right
 */

.padding (@label, @size: 1, @key:1) when (@size =< 30) {
  .p-@{key} {
    padding: @size !important;
  }

  .p-t-@{key} {
    padding-top: @size !important;
  }

  .p-b-@{key} {
    padding-bottom: @size !important;
  }

  .p-l-@{key} {
    padding-left: @size !important;
  }

  .p-r-@{key} {
    padding-right: @size !important;
  }

  .padding(@label - 5; @size + 5; @key + 5);
}

.padding(25, 0px, 0);

/*
 * Generate Font-Size Classes (8px - 20px)
 */
.font-size (@label, @size: 8, @key:10) when (@size =< 30) {
  .f-@{key} {
    font-size: @size !important;
  }

  .font-size(@label - 1; @size + 1; @key + 1);
}

.font-size(20, 8px, 8);

/*
 * Font Weight
 */
.f-300 {
  font-weight: 300 !important;
}

.f-400 {
  font-weight: 400 !important;
}

.f-500 {
  font-weight: 500 !important;
}

.f-700 {
  font-weight: 700 !important;
}

/*
 * Position Classes
 */
.p-relative {
  position: relative !important;
}

.p-absolute {
  position: absolute !important;
}

.p-fixed {
  position: fixed !important;
}

.p-static {
  position: static !important;
}

/*
 * Overflow
 */
.o-hidden {
  overflow: hidden !important;
}

.o-visible {
  overflow: visible !important;
}

.o-auto {
  overflow: auto !important;
}

/*
 * Display
 */
.d-block {
  display: block !important;
}

.di-block {
  display: inline-block !important;
}




@array1: c-white bgc-white @m-white, c-black bgc-black @m-black, c-brown bgc-brown @m-brown, c-pink bgc-pink @m-pink, c-red bgc-red @m-red, c-blue bgc-blue @m-blue, c-purple bgc-purple @m-purple, c-deeppurple bgc-deeppurple @m-deeppurple, c-lightblue bgc-lightblue @m-lightblue, c-cyan bgc-cyan @m-cyan, c-teal bgc-teal @m-teal, c-green bgc-green @m-green, c-lightgreen bgc-lightgreen @m-lightgreen, c-lime bgc-lime @m-lime, c-yellow bgc-yellow @m-yellow, c-amber bgc-amber @m-amber, c-orange bgc-orange @m-orange, c-deeporange bgc-deeporange @m-deeporange, c-grey bgc-grey @m-grey, c-lightgrey bgc-lightgrey @m-lightgrey, c-bluegrey bgc-bluegrey @m-bluegrey, c-indigo bgc-indigo @m-indigo;

.-(@i: length(@array1)) when (@i > 0) {
  @value: extract(@array1, @i);
  @name: extract(@value, 1);
  @name2: extract(@value, 2);
  @color: extract(@value, 3);
  &.@{name2} {background-color: @color !important;}
  &.@{name} {color: @color !important;}
.-((@i - 1));
} .-;



/*
 * Background Colors
 */
.bg-black-trp {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/*
 * Border
 */
.b-0 {
  border: 0 !important;
}

/*
 * width
 */
.w-100 {
  width: 100% !important;
}

/*
 * Border Radius
 */
.brd-2 {
  border-radius: 2px;
}
